<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
	var i=0,j,x,y,z,a,b,c,d,e;
	function draw(){
	
			setInterval(huahua,10);}
	   
	function huahua(){
		a=document.getElementById('huabu').getContext('2d');
		a.clearRect(0,0,1000,3000);
		a.fillStyle='#000';
		a.fillRect(400,j,30,30);
		a.fillRect(300,x,30,30);
		a.fillRect(200,y,30,30);
		a.fillRect(100,z,30,30);
		a.fillRect(800,a,30,30);
		a.fillRect(700,b,30,30);
		a.fillRect(600,c,30,30);
		a.fillRect(500,d,30,30);
		
		a.beginPath();
		a.arc(275,j+20,20,0,Math.PI*2,true);
        a.fillStyle='#000';
		a.fill();
		a.beginPath();
		a.arc(675,x+20,20,0,Math.PI*2,true);
        a.fillStyle='#000';
		a.fill();
		a.beginPath();
		a.arc(575,y+20,20,0,Math.PI*2,true);
        a.fillStyle='#000';
		a.fill();
		a.beginPath();
		a.arc(375,z+20,20,0,Math.PI*2,true);
        a.fillStyle='#000';
		a.fill();
		a.beginPath();
		a.arc(475,a+20,20,0,Math.PI*2,true);
        a.fillStyle='#000';
		a.fill();
		i+=1;
		j=5*i*i/100;
		x=4*i*i/100;
		y=5*(i-3)*i/100;
		z=5*(i+5)*i/100;
		a=5*(i+1)*i/100;
		b=4*(i-1)*i/100;
		c=7*(i+1)*(i+1)/100;
		d=5*(i+5)*i/100;
		e=6*(i+3)*(i-3)/100;
		
		}

		
</script>
</head>

<body onLoad="draw()">

<canvas id="huabu" width="1000" height="3000"></canvas>

</body>
</html>
